<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,minimum-scale=1.0, maximum-scale=1.0" />
		<link rel="stylesheet" href="./index.css" />
		<title>好看的输入框</title>
	</head>
	<body>
		<div class="" >公众号【小李的李li】 前端动画业务仓库 欢迎关注~</div>
		<div class="showanimate-o">
			<div class="myfirstinput">
				<label for="isInput1" class="myfirstinput-label">联系人电话</label>
				<input type="text" id="isInput1" class="isInput" />
			</div>

			<div class="myfirstinput">
				<label for="isInput2" class="myfirstinput-label">联系人姓名</label>
				<input type="text" id="isInput2" class="isInput" />
			</div>
		</div>

		<div class="showanimate-o">
			<div class="secondinputanimate">
				<input required="" type="text" name="text" autocomplete="off" class="secondinputanimateinput" />
				<label class="secondinputanimatelabel">联系人电话</label>
			</div>


			<div class="secondinputanimate">
				<input required="" type="text" name="text" autocomplete="off" class="secondinputanimateinput" />
				<label class="secondinputanimatelabel">联系人姓名</label>
			</div>
		</div>
	</body>

	<script>
		let inputElements = document.querySelectorAll(".isInput");
		inputElements.forEach(function (inputElement) {
			let labelElement = inputElement.parentElement.querySelector(".myfirstinput-label");
			inputElement.addEventListener("focus", function () {
				labelElement.classList.remove("animatemoveend");
				labelElement.classList.add("animatemove");
			});
			inputElement.addEventListener("blur", function () {
				let value = inputElement.value;
				if (!value) {
					labelElement.classList.remove("animatemove");
					labelElement.classList.add("animatemoveend");
				}
			});
		});
	</script>
</html>
